<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title class="translate title"></title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body class="bg-secondary">
    <div class="modal-backdrop hide"></div>
    <div class="modal translate import-progress-modal text-dark" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title"></h5>
          </div>
          <div class="modal-body">
            <div class="progress position-relative">
              <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
              <div class="position-absolute w-100 text-center label"></div>
            </div>
            <p class="modal-body-contents"></p>
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button" class="btn btn-primary translate doneButton" data-dismiss="modal" disabled></button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal translate deleteDBModal text-dark" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title"></h5>
            <button type="button" class="close" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary translate yesButton"></button>
            <button type="button" class="btn btn-secondary translate noButton" data-dismiss="modal"></button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal translate introModal text-dark" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title"></h5>
            <button type="button" class="close" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary pull-right translate closeButton" data-dismiss="modal"></button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal translate disconnectedModal text-dark" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title"></h5>
            <button type="button" class="close" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary pull-right translate closeButton" data-dismiss="modal"></button>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid d-flex flex-column flex-fill h-100">
      <div class="row my-3 progress-bar-row">
        <div class="col-auto">
          <button
            class="btn btn-primary h-auto play"
            type="button"
          >
            <i class="fa fa-play" aria-hidden="true"></i>
          </button>
          <button
            class="btn btn-primary h-auto pause d-none"
            type="button"
          >
            <i class="fa fa-pause" aria-hidden="true"></i>
          </button>
        </div>
        <div class="col">
          <div class="progress h-100 encounterProgressBar">
            <div
              class="progress-bar"
              role="progressbar"
              aria-valuenow="0"
              aria-valuemin="0"
              aria-valuemax="0"
            ></div>
          </div>
          <div class="player-triggers">
            <div class="trigger-bar player0"></div>
            <div class="trigger-bar player1"></div>
            <div class="trigger-bar player2"></div>
            <div class="trigger-bar player3"></div>
            <div class="trigger-bar player4"></div>
            <div class="trigger-bar player5"></div>
            <div class="trigger-bar player6"></div>
            <div class="trigger-bar player7"></div>
            <div class="engage-indicator d-none"></div>
          </div>
        </div>
        <div class="col-auto">
          <div class="d-inline progress-bar-timestamp current-timestamp">00:00</div>
          <div class="d-inline progress-bar-timestamp divider-timestamp">/</div>
          <div class="d-inline progress-bar-timestamp duration-timestamp">00:00</div>
        </div>
        <div class="col-auto">
          <span class="connectionIndicator">
            <i
              class="translate connectedIndicator fa fa-plug text-success" data-toggle="tooltip"
              title=""></i>
            <i
              class="translate disconnectedIndicator fa fa-ban text-danger d-none" data-toggle="tooltip"
              title=""></i>
          </span>
        </div>
      </div>
      <div class="row main-content-row flex-fill">
        <div class="col-5 raidbossTimelineColumn">
          <div class="d-flex flex-column flex-fill">
            <div class="timer-bar-container"></div>
            <div class="popup-text-container-outer"></div>
          </div>
        </div>
        <div class="col-5 trigger-info-column border-dark border-left border-right">
          <div class="triggerCheckboxes">
            <div class="trigger-hide-skipped-container translate" data-toggle="tooltip" title="">
              <input type="checkbox" name="hideSkipped" class="triggerHideSkipped translate" checked="checked" id="hideSkipped">
              <label for="hideSkipped"></label>
            </div>
            <div class="trigger-hide-collector-container translate" data-toggle="tooltip" title="">
              <input type="checkbox" name="hideCollector" class="triggerHideCollector translate" checked="checked" id="hideCollector">
              <label for="hideCollector"></label>
            </div>
            <div style="clear: both"></div>
          </div>
        </div>
        <div class="col-2 party-info-column">
          <div class="d-flex flex-column flex-fill">
            <div style="height: calc(16.666667vw - 30px)" class="p-1 map">
            </div>
            <div class="flex-fill party"></div>
          </div>
        </div>
      </div>
      <div class="row encounters-row bg-secondary">
        <div class="col">
          <button
            class="btn btn-primary w-auto h-auto float-right show-encounters-button"
            type="button"
            data-toggle="collapse"
            data-target="#encounters-tab"
            aria-expanded="true"
            aria-controls="encounters-tab"
          >
            <i class="fa fa-chevron-up" aria-hidden="true"></i>
            <i class="fa fa-chevron-down" aria-hidden="true"></i>
          </button>
          <div class="collapse show" id="encounters-tab">
            <div class="row flex-fill border-top border-dark">
              <button class="btn btn-primary btn-sm translate loadNetworkLogButton mx-2" type="button"></button>
              <button class="btn btn-primary btn-sm translate exportDBButton mx-2" type="button"></button>
              <button class="btn btn-primary btn-sm translate importDBButton mx-2" type="button"></button>
              <button class="btn btn-primary btn-sm translate clearDBButton mx-2" type="button"></button>
            </div>
            <div class="row flex-fill border-top border-dark encounters-container">
              <div
                class="col col-3 border-right border-dark h-100 mh-100 zoneList"
              ></div>
              <div
                class="col col-3 border-right border-dark h-100 mh-100 dateList"
              ></div>
              <div
                class="col col-3 border-right border-dark h-100 mh-100 encounterList"
              ></div>
              <div class="col col-3 h-100 mh-100 encounter-info"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="file" name="files" class="d-none loadFileInput">
    <div class="templates">
      <template class="textElement">
        <div class="popup-text-container">
          <span class="popup-text"></span><span class="popup-text-remaining pl-1"></span>
        </div>
      </template>
      <template class="progress">
        <div class="progress mb-1">
          <div class="progress-bar"></div>
          <div class="timer-bar-left-label"></div>
          <div class="timer-bar-right-label"></div>
        </div>
      </template>
      <template class="trigger-item">
        <div class="trigger-item"></div>
      </template>
      <template class="player-info-row">
        <div class="player-info-row">
          <div>
            <div class="jobicon"></div>
            <div class="hp">
              <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax=""></div>
                <div class="label text-monospace"></div>
              </div>
            </div>
            <div class="mp">
              <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax=""></div>
                <div class="label text-monospace"></div>
              </div>
            </div>
          </div>
          <div class="player-name"></div>
        </div>
      </template>
      <template class="playerTriggerInfo">
        <div class="playerTriggerInfo d-none">
          <div class="d-flex flex-column">
            <div class="d-flex flex-column"></div>
          </div>
        </div>
      </template>
      <template class="jsonViewer">
        <pre class="json-viewer"></pre>
      </template>
      <template class="triggerLabel">
      </template>
      <template class="wrapCollapse">
        <div class="wrap-collapse">
          <div class="wrap-collapse-button">
            <button class="btn btn-outline-light btn-sm text-white" type="button">
              <div class="trigger-label">
                <div class="trigger-label-time"></div>
                <div class="trigger-label-name"></div>
                <div class="trigger-label-icon"></div>
                <div class="trigger-label-text"></div>
              </div>
            </button>
          </div>
          <div class="wrap-collapse-wrapper d-none"></div>
        </div>
      </template>
      <template class="encounterTabRow">
        <div class="selector-row border-bottom border-dark"></div>
      </template>
      <template class="encounterTabEncounterRow">
        <div class="selector-row border-bottom border-dark">
          <div class="encounterStart d-inline"></div>
          <div class="encounterName d-inline mx-2"></div>
          <div class="encounterDuration d-inline"></div>
        </div>
      </template>
      <template class="encounter-info">
        <div class="encounter-info">
          <div class="translate encounterLoad btn btn-primary pull-right mb-1"></div>
          <div class="translate encounterParse btn btn-primary pull-right mb-1"></div>
          <div class="translate encounterPrune btn btn-primary pull-right mb-1"></div>
          <div class="translate encounterDelete btn btn-primary pull-right mb-1"></div>
          <div class="translate encounterZone"></div>
          <div class="translate encounterStart"></div>
          <div class="translate encounterDuration"></div>
          <div class="translate encounterName"></div>
          <div class="translate encounterStartStatus"></div>
          <div class="translate encounterEndStatus"></div>
        </div>
      </template>
      <template id="topTooltipTemplate" class="tooltip top">
        <div class="tooltip bs-tooltip-top" role="tooltip" x-placement="top">
          <div class="arrow"></div>
          <div class="tooltip-inner"></div>
        </div>
      </template>
      <template id="rightTooltipTemplate" class="tooltip right">
        <div class="tooltip bs-tooltip-right" role="tooltip" x-placement="right">
          <div class="arrow"></div>
          <div class="tooltip-inner"></div>
        </div>
      </template>
      <template id="bottomTooltipTemplate" class="tooltip bottom">
        <div class="tooltip bs-tooltip-bottom" role="tooltip" x-placement="bottom">
          <div class="arrow"></div>
          <div class="tooltip-inner"></div>
        </div>
      </template>
      <template id="leftTooltipTemplate" class="tooltip left">
        <div class="tooltip bs-tooltip-left" role="tooltip" x-placement="left">
          <div class="arrow"></div>
          <div class="tooltip-inner"></div>
        </div>
      </template>
    </div>
  </body>
</html>
